<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="color-scheme" content="dark light" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Сложно сосредоточиться</title>
  <link rel="stylesheet" href="./fonts/fonts.css">
  <link rel="stylesheet" href="./styles/variables.css">
  <link rel="stylesheet" href="./styles/globals.css">
  <link rel="stylesheet" href="./styles/style.css">
  <link rel="stylesheet" href="./styles/dark.css">
  <link rel="stylesheet" href="./styles/light.css">
  <link rel="icon" href="./images/favicon.ico" sizes="any">
  <link rel="icon" href="./images/favicon.svg" type="image/svg+xml">
  <link rel="icon" href="./images/mobile-icon.png">
</head>
<body class="page">
  <header class="header decorated-element cover">
    <nav class="header__theme-menu">
      <span class="rec-element">rec</span>
      <ul class="header__theme-menu-list">
        <li class="header__theme-menu-item">
          <button class="header__theme-menu-button header__theme-menu-button_type_light">
            День
          </button>
        </li>
        <li class="header__theme-menu-item">
          <button class="header__theme-menu-button header__theme-menu-button_active header__theme-menu-button_type_auto"
            disabled>
            Авто
          </button>
        </li>
        <li class="header__theme-menu-item">
          <button class="header__theme-menu-button header__theme-menu-button_type_dark">
            Неон
          </button>
        </li>
      </ul>
    </nav>
    <h1 class="header__topic-name">no focus</h1>
    <div class="header__grid-template">
      <p class="header__topic-description">
        Что делать, когда не можешь делать ничего <br />
        Или почему нам так сложно сконцентрироваться, особенно когда очень надо
      </p>
    </div>
  </header>
  <main class="main">
    <section class="why">
      <h2 class="section__header">Почему сосредоточиться так сложно</h2>
      <div class="section__topic-text">
        <article>
          <h3 class="section__sub-header">Многозадачность</h3>
          <p class="section__text">
            Особенно сложно сосредоточиться, когда задач много и все они — важные.
            Где же легендарная многозадачность, когда она так нужна вам (и всем
            нанимающим менеджерам этого мира)? А дело в том, что её просто не
            существует. Исследователи
            <a class="link-unique" target="_blank" href="https://www.google.ru/">выяснили</a>, что мозгу тяжело
            концентрироваться даже на двух делах одновременно. А когда в поле
            внимания попадает несколько важных задач, организм паникует и выделяет
            кортизол и адреналин — «гормоны стресса». Из-за этого мы работаем
            невнимательно: ошибаемся и быстро устаём.
          </p>
        </article>
        <article>
          <h3 class="section__sub-header">Дофамин</h3>
          <p class="section__text">
            С гормонами стресса всё понятно, но дальше — ещё интереснее. В нашей
            невозможности сосредоточиться замешана и полная противоположность
            стрессу — дофамин. Это вещество участвует в системе вознаграждения
            мозга. Причём тут он? Мы часто отвлекаемся от важной задачи на что-то
            более «приятное» для мозгов. Например, смотрим лайки в соцсетях. В это
            время и выделяется дофамин — и мы чувствуем удовольствие. Получается
            замкнутый круг: чем больше отвлекаешься, тем больше удовольствия
            получаешь.
          </p>
        </article>
      </div>
    </section>
    <section class="what">
      <h2 class="section__header what__template">Что снижает концентрацию внимания?</h2>
      <div class="section__topic">
        <article>
          <h3 class="section__sub-header">Многозадачность</h3>
          <p class="section__text">
            Как концентрация может снижаться из-за… концентрации? Любая стрессовая
            ситуация (и резко меняющийся мир в целом) заставляет наш мозг
            постоянно «сканировать» окружающую среду на предмет опасности.
            Например, читать новости вместо работы. Но быть собранными всё время —
            невозможно. Концентрация — мышца, и она может не выдержать, если не
            давать ей отдохнуть.
          </p>
        </article>
        <article>
          <h3 class="section__sub-header">Еда</h3>
          <p class="section__text">
            «Быстрые углеводы» — сахар, белый хлеб, сладости — молниеносно
            доставляют в мозг энергию и помогают ему лучше работать. Но уходит эта
            энергия также быстро, как и приходит. А мы в результате попадаем на
            «углеводные качели»: как только действие «быстрых углеводов»
            заканчивается, мы чувствуем усталость и сонливость. И хотим ещё больше
            быстрых углеводов.
          </p>
        </article>
        <article>
          <h3 class="section__sub-header">Гаджеты</h3>
          <p class="section__text">
            Да-да, это та самая ситуация, когда на экране ноутбука — код, в
            наушниках — подкаст, а на компьютере фоном — ещё и видео с забавными
            утятами. В результате мозг пытается переключиться с одной задачи на
            другую — и просто не может. А чтобы вернуться к состоянию полной
            концентрации, человеку в среднем нужно 20 минут. Вот и получается, что
            чем больше времени мы проводим в гаджетах, тем больше времени затем
            нужно, чтобы вернуться к работе.
          </p>
        </article>
      </div>
    </section>
    <section class="how">
      <h2 class="section__header how-template">
        Как концентрироваться лучше, чем золотая рыбка (то есть дольше трёх
        секунд)
      </h2>
      <div class="section__topic-text">
        <h3 class="section__how-advice">
          5 простых (на самом деле не очень) советов
        </h3>
        <article>
          <h4 class="section__sub-header how-differences">Представьте небо и облака</h4>
          <p class="section__text">
            Или листья в ручье. Тут дело в лёгкой медитации, которая помогает
            успокоиться. Ведь часто именно тревожные мысли о сложных задачах как
            раз и мешают эти сложные задачи делать. В такие моменты можно закрыть
            глаза и представить, что чистое небо — это вы, а облака — тревожные
            мысли. И сколько бы их ни было — ясное небо всегда будет где-то там,
            за тучами, и никуда не денется. Это упражнение поможет вернуться в
            настоящий момент, а не волноваться о потенциальных проблемах из
            будущего.
          </p>
        </article>
        <article>
          <h4 class="section__sub-header how-differences">Включите музыку</h4>
          <p class="section__text">
            Но не любую, и не любимую. Любимая может быть связана с сильными
            положительными эмоциями, которые тоже очень сильно отвлекают. Подойдёт
            тихая, спокойная, умеренно-ритмичная. Можно вообще попробовать
            включить плейлист в «белым шумом» или нейромузыкой.
          </p>
        </article>
        <article>
          <h4 class="section__sub-header how-differences">Прогуляйтесь</h4>
          <p class="section__text">
            Или даже пробегитесь. Лучше найти парк или лес: один эксперимент
            <a class="link-unique" target="_blank" href="https://www.google.ru/">показал</a>, что созерцание природы повышает концентрацию, в то время как
            после просмотра городских пейзажей она наоборот понижается. Можно
            совместить прогулку с физическими упражнениями или бегом — так в мозг
            поступит ещё больше кислорода и он будет лучше работать. Но и простая
            двадцатиминутная прогулка — тоже отличный вариант.
          </p>
        </article>
        <article>
          <h4 class="section__sub-header how-differences">Хорошо ешьте</h4>
          <p class="section__text">
            Мы — не ваша бабушка, но это правда важно. Выбирайте продукты, которые
            препятствуют резким скачкам сахара в крови. Например, с высоким
            содержанием клетчатки: овощи, ягоды, бобовые (нут, чечевица, фасоль),
            коричневый рис, хлеб из цельнозерновой пшеницы.
          </p>
        </article>
        <article>
          <h4 class="section__sub-header how-differences">Читайте</h4>
          <p class="section__text">
            Настоящие бумажные книги. Это правда помогает с концентрацией: чтобы
            прочитать пост в соцсети, достаточно нескольких минут или даже секунд.
            А вот интересная книга способна затянуть и на несколько часов и круто
            тренирует направленное внимание.
          </p>
        </article>
      </div>
    </section>
    <section class="image-section">
      <h2 class="image-section__header">А можно в картинках?</h2>
      <img
        class="image-section__element image-section__element-sunset" 
        src="./images/sunset.png" 
        loading="lazy"
        alt="закат на фоне моря и гор">
      <img 
        class="image-section__element image-section__element-ice-cream" 
        src="./images/ice-cream.png" 
        loading="lazy"
        alt="тарелка с шариками мороженого в мультяшной стилизации">
      <img 
        class="image-section__element image-section__element-tape" 
        src="./images/tape.png" 
        loading="lazy"
        alt="компакт-кассета и курсор на фоне облаков">
      <img class="image-section__element image-section__element-books" src="./images/books.png" loading="lazy"
        alt="стопка книг с чашкой кофе стоящей сверху">
      <img 
        class="image-section__element image-section__element-street" 
        src="./images/street.png" 
        loading="lazy"
        alt="улица в японском городе исполненная в пастельных тонах">
    </section>
  </main>
  <footer class="footer decorated-element">
    <h2 class="footer__title">focus</h2>
  </footer>
  <script src="./scripts/script.js"></script>
</body>

</html>